<template>
	<view class="list">
		<view class="news_item" v-for="item in list" :key="item.id" @tap="opendetail(item.id)">
			<view class="news_image">
				<image class="news_image" mode="aspectFill" :src="item.url" ></image>
			</view>
			<view class="news_text">
				<view>{{item.name}}</view>
				<view>{{item.subhead}}</view>
			</view>
		</view>
		<view class="uni-load-more" style="text-align: center;height: 50rpx;margin-top: 20rpx;" v-if="showloadmore">{{showloadmoreltext}}</view>
	</view>
</template>

<script>
	
	export default{
		data(){
			return{
				current:1,
				list:[],
				showloadmore:false,
				showloadmoreltext:'加载更多'
			}
		},
		onLoad(){
			this.getData();
			uni.$on('passvalue',function(data){
				console.log(data);
			});
		},
		onUnload(){
			uni.$off('passvalue');
		},
		onPullDownRefresh(){
			this.current = 1;
			this.getData();
		},
		onReachBottom(){
			this.showloadmore = true;
			this.current++;
			this.getData();
		},
		methods:{
			getData(){
				console.log(this.current);
				uni.request({
					url: 'https://wx.yixueks.com/medicalApp/coursePack/getList',
					method: 'GET',
					data: {
						size :10,
						current : this.current,
						majorId : 1,
						type : 6
					},
					success: res => {
						var array = [];
						array = res.data.result;
						if (array.length==0) {
							this.showloadmoreltext = '没有更多数据了';
							this.showloadmore = true;
						} else{
							this.showloadmoreltext = '加载更多';
							this.showloadmore = false;
						}
						if (this.current==1) {
							this.list = array;
							uni.stopPullDownRefresh();
						} else{
							this.list = this.list.concat(array);
						}
					}
				});
			},
			opendetail(e){
				console.log(e);
				// var classid = e.currentTarget.dataset.classid;
				var classid = e;
				uni.navigateTo({
					url: 'detail?classid='+classid,
				});
			}
		}
	}
</script>

<style>
	.list{
		flex: 1;
		width: 750rpx;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}
	
	.news_item{
		display: flex;
		flex-direction: row;
		height: 160rpx;
		margin-left: 15rpx;
		margin-right: 15rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
		padding-top: 15rpx;
		padding-bottom: 15rpx;
		border-bottom: 2rpx #efefef solid;
	}

	.news_image{
		/* flex: 1; */
		background-color: red;
		max-width: 240rpx;
		max-height: 160rpx;
		border-radius: 10rpx;
	}
	.news_text{
		flex: 1;
		padding-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	
</style>